<template>
  <div class="app-contain">
     <!-- 第一行 -->
    <div class="one">
      <el-row>
        <el-col :span="20">
          <div class="grid-content">
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item :to="{ path: '/' }">培训实施</el-breadcrumb-item>
              <el-breadcrumb-item>项目管理</el-breadcrumb-item>
            </el-breadcrumb>
          </div></el-col
        >
        <el-col :span="4"
          ><div class="grid-content bg-purple-light"></div
        ></el-col>
      </el-row>
    </div>
    <!-- 第二行 -->
    <div class="two">
      <el-row>
        <el-col :span="2"><div></div></el-col>
        <el-col :span="20">
          <div class="two_left">
            <div>
              <span>创建培训项目</span>
            </div>
          </div>

          <div class="two_right">
              <br>
                项目名称 <el-input v-model="input1" placeholder="请输入内容" style="width:15%"></el-input>
                <font style="margin-left:30px">项目时间</font> <el-input v-model="input2" placeholder="请输入内容" style="width:15%;"></el-input>
                <font style="margin-left:30px">项目状态</font> <el-input v-model="input3" placeholder="请输入内容" style="width:15%"></el-input>
                <br><br>
                <font style="margin-left:16px">负责人</font> <el-input v-model="input4" placeholder="请输入内容" style="width:15%"></el-input>
                <font style="margin-left:30px">培训形式</font> <el-input v-model="input5" placeholder="请输入内容" style="width:15%"></el-input>
          </div>
        </el-col>
        <el-col :span="2"><div></div></el-col>
      </el-row>
    </div>
    <!-- 第二行 -->
    <div class="three">
      <el-row>
        <el-col :span="5" style="margin-left: 75px"></el-col>
        <el-col :span="20">
            <div class="table">
                <el-table
                    :data="tableData"
                    style="width: 1147px"
                    max-height="250">
                    <el-table-column
                    fixed
                    prop="itemtitle"
                    label="项目名称"
                    width="350">
                    </el-table-column>
                    <el-table-column
                    prop="itemtime"
                    label="项目时间"
                    width="230">
                    </el-table-column>
                    <el-table-column
                    prop="itemstatus"
                    label="项目状态"
                    width="180">
                    </el-table-column>
                    <el-table-column
                    prop="manager"
                    label="负责人"
                    width="120">
                    </el-table-column>
                    <el-table-column
                    fixed="right"
                    label="操作"
                    width="120">
                    <template slot-scope="scope">
                        <el-button
                        @click.native.prevent="updateRow(scope.$index, tableData)"
                        type="text"
                        size="small">
                        移除
                        </el-button>
                    </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-col>
        <el-col :span="5"><div class="grid-content bg-purple"></div></el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  el: ".app-contain",
  methods: {
    handleClick(row) {
      
    },
    updateRow(index, rows) {
        
      }
  },
  data() {
    return {
      radio: "全部",
      itemtitle: "",
      itemstatus: "",
      input1:"不限",
      input2:"不限",
      input3:"不限",
      input4:"不限",
      input5:"不限",
      tableData: [
        {
          itemtitle: "2018年人力资源部人员培训需求",
          itemtime: "人力资源部",
          itemstatus: "2019/01/01 14:00",
          manager:"李松",
        },
        {
          demandtitle: "2018年人力资源部人员培训需求",
          department: "人力资源部",
          date: "2019/01/01 14:00",
        }
      ],
      
    };
  },
};
</script>

<style>
.app-contain {
  width: 100%;
  height: 2000px;
  background-color: ghostwhite;
}
.el-breadcrumb {
  font-size: 20px;
  line-height: 4;
}
.one{
    float: left;
    margin-left: 40px;
    width: 300px;
}
.two {
  clear: both;
  margin-top: 50px;
}
.two_left {
  float: left;
  margin-left: 75px;
  width: 300px;
  height: 150px;
  background-color: deeppink;
}
.two_right {
  float: left;
  background-color: white;
  width: 705px;
  height: 150px;

  margin-left: 10px;
}
.three {
  clear: both;
  height: auto;
}

#words {
  margin-top: 1.67em;
  margin-left: 120px;
}
.teo_left {
  height: 100%;
  background-color: yellow;
  width: 300px;
  margin-right: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.two_left > div:first-child {
  width: 100%;
  height: 150px;
  font-size: 30px;
  color: #fff;
  position: relative;
  background-image: url(../../img/背景.jpg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.three{
    float: left;
    margin-left: 73px;
    margin-top: 20px;
}
</style>